<template>
	<view class="top-container">
		<view class="success-tip">
			<text>支付成功，请您前往指定门店消费</text>
		</view>

		<!-- 门店信息（图标已标注） -->
		<view class="order-item">
			<view class="store-left">
				<image src="/static/images/商家白.png" class="icon"></image>
				<view class="item-content-top">
					<view class="store-name">{{ storeInfo.name }}</view>
					<view class="store-address">{{ storeInfo.address }}</view>
				</view>
			</view>
			<image src="/static/images/plane-white .png" class="icon"></image>
		</view>
	</view>
	<view class="order-success-container">
		<!-- 订单核心信息 -->
		<view class="order-summary">
			<view class="summary-title">订单详情</view>
			<view class="detail-item">
				<text>车辆精洗</text>
				<text class="price">¥{{ serviceInfo.price }}</text>
			</view>
			<view class="detail-item">
				<text>车辆附加费用</text>
				<text class="price">0</text>
			</view>
		</view>

		<!-- 费用明细（带删除线原价） -->
		<view class="price-detail">
			<text class="detail-label">原价</text>
			<text class="original-price">¥{{ serviceInfo.originalPrice }} </text>
		</view>
		<view class="price-detail">
			<text class="detail-label">店家优惠</text>
			<text class="discount">-¥{{ coupon.discount }}</text>
		</view>
		<view class="price-detail">
			<text class="detail-label">{{ coupon.name }}</text>
			<text class="discount">-¥{{ coupon.storeDiscount }}</text>
		</view>

		<!-- 最终支付金额（突出显示） -->
		<view class="final-price">
			<text class="label">支付金额</text>
			<text class="amount">¥{{ totalPrice }}</text>
		</view>
	</view>
	<view class="order-success-container1">
		<view class="summary-info">订单信息</view>
		<!-- 订单编号与时间 -->
		<view class="order-info">
			<view class="info-item">
				<view class="left">订单号:</view>
				<view class="right">{{ orderNo }}</view>
			</view>
			<view class="info-item">
				<view class="left">下单时间:</view>
				<view  class="right">{{ orderTime }}</view>
			</view>
		</view>

		<!-- 车辆信息（带收起箭头） -->
		<view class="order-item">
			<view class="left">车辆:</view>
			<view class="right">
				<text>{{ carInfo.model }}/{{ carInfo.plate }}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 门店信息（图2数据）
				storeInfo: {
					name: "伟业汽车美容店(人民路店)",
					address: "山阳区人民中路33号"
				},
				// 服务信息（新增原价字段）
				serviceInfo: {
					name: "车辆精洗",
					price: 29.9,
					originalPrice: 59.9 // 新增原价
				},
				// 优惠信息（新增商家优惠）
				coupon: {
					name: "优惠券",
					discount: 10,
					storeDiscount: 20 // 新增店家优惠
				},
				totalPrice: 29.9, // 最终支付金额
				orderNo: "121212112487878", // 订单编号
				orderTime: "2020.01.08 17:40", // 下单时间
				carInfo: {
					model: "奔驰FWE4",
					plate: "豫A98FHJ"
				}
			};
		}
	};
</script>

<style scoped>
	.top-container {
		background-color: #2176F3;
		height: 350rpx;
		padding: 0 20rpx;
	}

	.order-success-container {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		overflow: hidden;
		margin-top: -150rpx;
		padding: 0 20rpx;
	}

	.order-success-container1 {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 20rpx;
		overflow: hidden;

		padding: 0 20rpx;
	}
	
	.order-item{
		display: flex;
		justify-content: space-between;
	}
	
	.store-left{
		display: flex;
	}

	.item-content-top {
		margin-left: 0rpx;
		font-size: 30rpx;
		line-height: 30rpx;
		color: #fff;
	}

	.store-address {
		color: #fff;
		margin-top: 30rpx;
		font-size: 24rpx;
	}

	/* 顶部成功提示 */
	.success-tip {
		color: #fff;
		font-size: 24rpx;
		margin-bottom: 30rpx;
	}

	.success-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}

	/* 步骤条（当前步骤样式） */
	.steps {
		margin: 30rpx 0;
	}

	.step.active .step-icon {
		background-color: #4D9CFF;
		/* 绿色高亮 */
		border: 2rpx solid #4D9CFF;
	}

	.step.active .step-text {
		color: #4D9CFF;
		font-weight: bold;
	}

	/* 订单核心信息 */
	.order-summary {
		border-top: 1rpx solid #eee;
		padding: 20rpx 0;
	}

	.summary-title {
		font-size: 30rpx;
		margin-bottom: 30rpx;
	}
	.summary-info{
		font-size: 30rpx;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #F8F8F8;
	}

	.detail-item {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		border-bottom: 1rpx dashed #eee;
		font-size: 24rpx;
	}

	/* 费用明细 */
	.price-detail {
		display: flex;
		justify-content: space-between;
		padding: 15rpx 0;
		font-size: 24rpx;
	}

	.original-price {
		text-decoration: line-through;
		color: #999;
	}

	.discount {
		color: #f5442c;
	}

	/* 最终支付金额（突出显示） */
	.final-price {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-top: 2rpx solid #eee;
		margin: 20rpx 0;
		font-size: 24rpx;
	}

	.amount {
		font-size: 24rpx;
		color: green;
		font-weight: bold;
	}

	/* 订单信息 */
	.order-info {
		font-size: 24rpx;
		color: #666;
	}

	.info-item {
		margin: 35rpx 0;
		display: flex;
		justify-content: space-between;
	}

	/* 公共图标样式（已标注） */
	.icon {
		width: 30rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}

	.icon1 {
		width: 20rpx;
		height: 20rpx;
		color: #999;
	}
	.left{
		font-size: 24rpx;
		color: #000;
		line-height: 24rpx;
	}
	.right{
		font-size: 24rpx;
		color: #999;
		line-height: 24rpx;
	}
</style>